<!--
	作者：956911785@qq.com
	时间：2018-10-16
	描述：顶部
-->
<template>
	<div class="layout">
		<Menu mode="horizontal" theme="dark" active-key="1" style="background:#375473;height:90px;line-height:90px;">
			<div class="layout-logo">
				<a style="color:#fff;cursor: pointer;">环西悦·读时光管理系统</a>
			</div>
			
			
			<div class="layout-nav">

				<MenuItem name="1" style="color:#fff;width:120px;padding:0px;margin-left:20px;">
					<router-link to="/sjgl" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#ff7c67;">
							<Icon type="md-home" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">书籍管理</span>
					</router-link>
				</MenuItem>
			
				<MenuItem name="1" style="color:#fff;width:120px;padding:0px;margin-left:20px;">
					<router-link to="/scyy" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#87CEFA;">
							<Icon type="md-mic" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">诗词语音</span>
					</router-link>
				</MenuItem>

				<MenuItem name="2" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/scdh" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#8B8B00;">
							<Icon type="logo-codepen" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">环西诗词大会</span>
					</router-link>
				</MenuItem>
				
				<MenuItem name="3" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/jfsc" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#BC8F8F;">
							<Icon type="md-school" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">积分商城</span>
					</router-link>
				</MenuItem>

				<MenuItem name="4" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/sjtj" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#4A708B;">
							<Icon type="md-analytics" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">数据统计</span>
					</router-link>
				</MenuItem>
				
				<MenuItem name="5" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/jcsz" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#53c7ce;">
							<Icon type="ios-settings" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">系统设置</span>
					</router-link>
				</MenuItem>
			</div>
			
			<div style="float:right;color:#FFFFFF;padding-right: 10px;">
				<Icon type="md-menu" style="font-size:25px;line-height: 90px;float: left;" />
				<span style="float: left;">{{user.name}}</span>
				<a style="color:#FFA07A;" @click="openEditZhMm()">
					<Icon type="md-create" style="font-size:25px;line-height: 90px;float: left;" />
					<span style="float: left;">修改账户或密码</span>
				</a>
				<a style="color:#ed4014;margin-left:5px;" @click="exitlogin()">
					<Icon type="md-backspace" style="font-size:25px;line-height: 90px;float: left;" />
					<span style="float: left;">退出登录</span>
				</a>
				<div style="float: left;width: 64px; height: 64px; border-radius: 50%; border: 3px solid #eee; overflow: hidden;margin-top:5%;margin-left:5px;">
					<img src="../../../../static/user.jpg" style="width: 64px; height:64px;" />
				</div>
			</div>
		</Menu>
		<UaccountEdit ref="UaccountEdit" :usrs="usrs"></UaccountEdit> 
	 
	</div>
</template>
<script>
	import UaccountEdit from "./UaccountEdit";
	export default {
		name: "tdhead",
		data() {
			return {
				items: "",
				usrs:{
					dlzh:'',
					dlma:'',
				}
			}
		},
		methods: {
			exitlogin(){
				this.$store.dispatch("resetUser");
				sessionStorage.clear();
				this.$http.get("/host/readbook/ZXlogin.html")
				.then(datas => {
					this.$router.push({
						path: '/login'
					});
				});
			},
			
			openEditZhMm(){
				this.usrs.dlzh=this.user.dlzh;
				this.usrs.dlma=this.user.dlma;
				this.$refs.UaccountEdit.modal0 = true;
			},
			
			
		},
		computed: {
			user: function() {
				return this.$store.state.app.user;
			}
		},
		mounted(){	
			
		},
		components: {
			UaccountEdit
		},
	}
</script>

<style scoped="scoped">
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
	}
	
	.layout-logo {
		float: left;
		position: relative;
		color: #fff;
		font-size: 24px;
		padding-left: 10px;
	}
	
	.layout-nav {
		margin: 0 auto;
		color: #fff;
	}
	
	.layout-assistant {
		width: 300px;
		margin: 0 auto;
		height: inherit;
	}
	
	.layout-breadcrumb {
		padding: 10px 15px 0;
	}
	
	.layout-content {
		min-height: 200px;
		margin: 15px;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
	}
	
	.layout-content-main {
		padding: 10px;
	}
	
	.layout-copy {
		text-align: center;
		padding: 10px 0 20px;
		color: #9ea7b4;
	}
	
	.ivu-menu-item {
		color: #fff;
	}
	
	.out_head_div {
		width: 120px;
		height: 90px;
		overflow: hidden;
	}
	
	.active {
		width: 120px;
		height: 90px;
		overflow: hidden;
		background: #2e4561;
		color: #eaff00;
	}
	
	.icon_around_div {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		line-height: 44px;
		margin: 0px auto;
		margin-top: 15px;
		text-align:center;
		color:#fff;
	}
	
	.span_title {
		width: 120px;
		height: 20px;
		line-height: 20px;
		float: left;
		text-align: center;
		font-size: 14px;
		margin-top: 5px;
	}

</style>